<template>
  <view class="remark-wrapper">
    <view class="remark" :class="{ 'remark-ellipsis': !toggleStatus }" ref="remarkRef">
      {{ text || '-' }}
    </view>
    <view v-if="showMoreButton" class="more-button" @click="toggleStatus = !toggleStatus">
      {{ toggleStatus ? '收起' : '查看更多' }}
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue'

  const props = defineProps({
    text: {
      type: [String, Number],
    },
  })

  const remarkRef = ref([])
  const showMoreButton = ref(false)

  const checkTruncation = () => {
    const dom = remarkRef.value.$el
    if (dom && dom.scrollHeight > dom.clientHeight) {
      showMoreButton.value = true
    } else {
      showMoreButton.value = false
    }
  }

  const toggleStatus = ref(false)

  onMounted(async () => {
    await nextTick() // 确保 DOM 已经更新
    checkTruncation()
  })
</script>

<style lang="less" scoped>
  .remark-wrapper {
    .remark-ellipsis {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 限制为两行 */
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .more-button {
      color: #3072f6;
      display: inline-block;
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 2rpx;
        background: #3072f6;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
</style>
